<template>
  <div 
    id="app" 
    :class="themeStore.themeClasses"
    class="min-h-screen transition-colors duration-300"
  >
    <!-- Loading screen -->
    <Transition name="fade">
      <div
        v-if="appStore.loading"
        class="fixed inset-0 bg-gradient-dark dark:bg-gradient-dark bg-grid dark:bg-grid flex items-center justify-center z-50"
      >
        <div class="text-center">
          <div class="w-16 h-16 mx-auto mb-6 bg-gradient-primary rounded-2xl flex items-center justify-center glow-effect animate-pulse">
            <span class="text-white font-bold text-2xl">X</span>
          </div>
          <h2 class="text-xl font-semibold text-gradient mb-4">
            X-Synergy OS
          </h2>
          <div class="flex items-center justify-center space-x-2">
            <div class="w-2 h-2 bg-primary-500 rounded-full animate-bounce"></div>
            <div class="w-2 h-2 bg-primary-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
            <div class="w-2 h-2 bg-primary-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
          </div>
          <p class="text-sm text-gray-400 dark:text-gray-500 mt-4">
            正在初始化AI系统...
          </p>
        </div>
      </div>
    </Transition>

    <!-- Main application -->
    <router-view />

    <!-- Global notifications -->
    <NotificationContainer />

    <!-- Global error boundary -->
    <GlobalErrorModal v-if="appStore.hasError" />


  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, watch } from 'vue'
import { useAuthStore } from '@/store/auth'
import { useThemeStore } from '@/store/theme'
import { useAppStore } from '@/store/app'
import NotificationContainer from '@/components/NotificationContainer.vue'
import GlobalErrorModal from '@/components/GlobalErrorModal.vue'

const authStore = useAuthStore()
const themeStore = useThemeStore()
const appStore = useAppStore()

// Monitor loading state for debugging
watch(() => appStore.loading, (newValue, oldValue) => {
  if (import.meta.env.DEV) {
    console.log('App.vue - loading changed:', { from: oldValue, to: newValue })
  }
})

// Lifecycle
onMounted(() => {
  // Set up global event listeners
  document.addEventListener('visibilitychange', handleVisibilityChange)
  window.addEventListener('online', handleOnlineStatus)
  window.addEventListener('offline', handleOnlineStatus)
  
  // Update page title
  document.title = `${appStore.appInfo.name} - ${appStore.appInfo.description}`
})

onUnmounted(() => {
  // Clean up event listeners
  document.removeEventListener('visibilitychange', handleVisibilityChange)
  window.removeEventListener('online', handleOnlineStatus)
  window.removeEventListener('offline', handleOnlineStatus)
  
  // App store cleanup
  appStore.cleanup()
})

// Event handlers
const handleVisibilityChange = () => {
  if (document.visibilityState === 'visible') {
    // App became visible, validate token if needed
    if (authStore.isAuthenticated) {
      console.log('🔍 页面重新可见，验证token有效性')
      authStore.validateToken()
    }
  }
}

const handleOnlineStatus = () => {
  // Online status is handled by the app store
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
